<template>
  <el-card>
    <el-table :data="permisstionArr" style="width: 100%; margin-bottom: 20px" row-key="id" border>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
        <template #="{row}">
          <el-button type="primary" icon="Plus" size="small" :disabled="row.level==4" @click="addPermission(row)">
            {{ row.level == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button type="warning" icon="Edit" size="small" :disabled="row.level==1" @click="updatePermission(row)">编辑
          </el-button>
          <el-popconfirm @confirm="removeMenu(row.id)" :title="`你确定要删除${row.name}?`" width="260px">
            <template #reference>
              <el-button type="danger" icon="Delete" size="small" :disabled="row.level==1">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--对话框组件：添加/更新已有菜单的数据-->
    <el-dialog v-model="dialogVis" title="添加菜单" width="500px" @close="closeDialog">
      <template #default>
        <!--表单组件：收集与新增已有菜单的数据-->
        <el-form label-width="70px">
          <el-form-item label="名称">
            <el-input placeholder="请输入菜单名称" v-model="menuData.name"></el-input>
          </el-form-item>
          <el-form-item label="权限值">
            <el-input placeholder="请输入权限值" v-model="menuData.code"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="danger" @click="dialogVis=false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </template>
    </el-dialog>

  </el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
//@ts-ignore
import {reqAddOrUpdateMenu, reqAllPermission, reqRemoveMenu} from "@/api/acl/menu/menuApi.ts";
//@ts-ignore
import {T_MenuParams, T_Permission, T_PermissionResponseData} from "@/api/acl/menu/type.ts";
import {ElMessage} from "element-plus";

//存储菜单的数据
let permisstionArr = ref<T_Permission[]>([]);
//对话框
let dialogVis = ref<boolean>(false);//控制对话框的显示隐藏
//携带的参数
let menuData = reactive<T_MenuParams>({
  code: '',
  level: 0,
  name: '',
  pid: 0
})

//组件挂载完毕发送请求获取数据
onMounted(() => {
  getHasPermission();
});

//获取数据方法
const getHasPermission = async () => {
  let result: T_PermissionResponseData = await reqAllPermission()
  if (result.code == 200) {
    permisstionArr.value = result.data;
  } else {
    ElMessage({type: "error", message: "获取菜单数据失败！"})
  }
};

//添加菜单按钮的回调
const addPermission = (row: T_Permission) => {
  //收集新增的菜单的level数值
  menuData.level = row.level + 1;
  //给父级添加的菜单，需要父级的id
  menuData.pid = row.id;
  dialogVis.value = true;
}

//编辑菜单按钮的回调
const updatePermission = (row: T_Permission) => {
  dialogVis.value = true;
  //点击修改按钮，收集已有的菜单数据
  Object.assign(menuData, row);
}

//对话框确定按钮的回调
const save = async () => {
  //新增子菜单|更新已有菜单的数据
  let result: any = await reqAddOrUpdateMenu(menuData)
  console.log(result)
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: menuData.id ? `更新${menuData.name}菜单成功` : `添加${menuData.name}菜单成功`
    })
    getHasPermission();
  } else {
    ElMessage({
      type: "error",
      message: menuData.id ? `更新${menuData.name}菜单失败` : `添加${menuData.name}菜单失败`
    })
  }
  dialogVis.value = false;
}

//关闭对话框回调
const closeDialog = () => {
  Object.assign(menuData, {
    id: null,
    code: '',
    level: 0,
    name: '',
    pid: 0
  })
}

//删除菜单的回调
const removeMenu = async (id: number) => {
  let result: any = await reqRemoveMenu(id);
  if (result.code == 200) {
    ElMessage({type: "success", message: '删除成功！'});
    getHasPermission();//重新获取数据
  } else {
    ElMessage({type: "error", message: '删除失败！'});
  }
}

</script>

<style scoped>

</style>